added sass loader #2399
added sass loader #2399
Conversation
added example of sass loader and explanation of why it goes at the end in order to work
src/content/concepts/loaders.md
Outdated
|
|
||
| [`module.rules`](/configuration/module/#module-rules) allows you to specify several loaders within your webpack configuration. | ||
| This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader: | ||
| This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader. Loaders work in a backwards order, from the last one to the first one. The sass loader will work first compiling your sass to css and then it will call the css loader and then the style loader. In order for the sass loader to work it needs to be at the end as sass will be the first thing that gets compiled. If you are not working with sass then you won't need the sass-loader. |
There was a problem hiding this comment.
I think the explanation is valuable though it might need some tweaking.
First, when you say helps maintain clean code we need to specify why it's that, if not I would remove this part.
Before The sass loader I would emphasize that this is how this would work in the code snippet below, like: In the example above the sass loader....
Also, please leave a line break after the new paragraph so it's visible for others contributors that a new paragraph is kicking off.
There was a problem hiding this comment.
This order thing is already documented elsewhere, it is better to link to it.
Here, exactly: https://webpack.js.org/concepts/loaders/#loader-features
There was a problem hiding this comment.
ok changes made, @jeremenichelli I never changed the first part about helping to maintain clean code so not sure if I should be the one to remove it. I believe it refers to having them nicely separated so when you add more loader options its cleaner and easier to read than all inline.
updated the text and added the link to where the loader order is mentioned
src/content/concepts/loaders.md
Outdated
| This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader: | ||
| This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader. | ||
|
|
||
| In the example below note the order of the sass-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information on order of loaders. |
There was a problem hiding this comment.
What do you think about: ... for more information about loaders order.?
update loader order text
There was a problem hiding this comment.
Loaders are evaluated/executed from right to left.
In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader.
See "Loader Features" for more information about loaders order.
|
Yeh I quite like it better @Legends. I think the more info you give the better and although we kinda repeat the right to left in the more info on loader features I think it's important to be there. will change it and submit a pr and see what the others think |
added more detail for sass loader text to describe a bit more about how the loaders are read from right to left
|
Thanks! |
added example of sass loader and explanation of why it goes at the end in order to work